<!-- 折线图 -->
<style lang="stylus" scoped>
.anzhipie3
  height 100%
  background-size 100% 100%
  .main
    width 100%
    height calc(100% - 100px)
    margin-top -15px
</style>


<template>
<div class="anzhipie3">
  <p style='font-family:微软雅黑;font-size:16px;color:#0B903C;font-weight:bold;line-height:50px;'>刑满释放人员年龄段分布</p>
  <div class="main"></div>
</div>

</template>

<script>
import echarts from 'echarts'
import header from 'components/header/header'
import filter from 'components/filter/filter'
import axios from 'axios'
export default {
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      styleArr: [],
      myChart: {},
      name: ''
    }
  },
  methods: {
    _init() {
      this.myChart = echarts.init(document.querySelector('.anzhipie3 .main'))
      var glo = this.GLOBAL.BASE_URL;
      this.myChart.on("click", function(params) {
        // $(".table").show();
        // $(".table iframe").attr("src", glo + "/a/anzhi/anzhiMain/vuelist?munice=平顶山市").show();
      })
      this.legendArr = this.myChart.getOption().series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      this.$root.charts.push(this.myChart)
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    }
  },
  components: {
    'v-header': header,
    'v-filter': filter
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.querySelector('.anzhipie3 .main'))
    var areaname = localStorage.getItem('areaname');
    axios.get(this.GLOBAL.BASE_URL + '/a/sys/area/mapData?name=' + areaname).then((res) => {
    // axios.get('static/data/Data.json').then((res) => {
      if (res) {
        var countarr = [];
        $(res.data).each(function() {
          if (this.name === areaname) {
            countarr = this.anzhiagecount.split(",");
          }
        })
        this.myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: [
            {
              name: '刑满释放人员占比',
              type: 'pie',
              radius: '55%',
              data: [
                {name: '18岁以下', value: countarr[0]},
                {name: '18-30岁', value: countarr[1]},
                {name: '30-50岁', value: countarr[2]},
                {name: '50岁以上', value: countarr[3]}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 1)'
                },
                normal: {
                  label: {
                    formatter(v) {
                      return v.name + " \n " + v.value + "人 (" + v.percent + "%)"
                    },
                    show: true,
                    fontWeight: 'bold'
                  }
                }
              },
              color: ['#0B903C', '#FFC300', '#C4F42D', '#CBCBCB']
            }
          ]
        });
        this._init()
      }
    });
  }
}

</script>
